<template v-if="searchStore.searchSuggestData">
  <div v-for="order in searchStore.searchSuggestData.order" :key="order">
    <div class="pt-2 pb-1.5 px-2.5">{{ getTitle(order) }}</div>
    <div v-if="order === 'songs'">
      <div
        v-for="item in searchStore.searchSuggestData.songs"
        :key="item.id"
        class="py-1.5 px-2.5 hover:bg-gray-300 text-xs cursor-pointer"
        @click="goSearch(item.id)"
      >
        <span class="text-emerald-500">{{ item.name }}</span>
        <span class="pl-1"> - {{ item.artists[0].name }}</span>
      </div>
    </div>
    <div v-if="order === 'albums'">
      <div
        v-for="item in searchStore.searchSuggestData.albums"
        :key="item.id"
        class="py-1.5 px-2.5 hover:bg-gray-300 text-xs cursor-pointer"
        @click="goSearch(item.id)"
      >
        <span class="text-emerald-500">{{ item.name }}</span>
        <span class="pl-1"> - {{ item.artist.name }}</span>
      </div>
    </div>
    <div v-if="order === 'artists'">
      <div
        v-for="item in searchStore.searchSuggestData.artists"
        :key="item.id"
        class="py-1.5 px-2.5 hover:bg-gray-300 text-xs cursor-pointer flex items-center"
        @click="goSearch(item.id)"
      >
        <el-avatar size="small" :src="item.img1v1Url" />
        <span class="text-emerald-500 ml-2">{{ item.name }}</span>
      </div>
    </div>
    <div v-if="order === 'playlists'">
      <div
        v-for="item in searchStore.searchSuggestData.playlists"
        :key="item.id"
        class="py-1.5 px-2.5 hover:bg-gray-300 text-xs cursor-pointer flex items-center"
        @click="goSearch(item.id)"
      >
        <el-avatar size="small" :src="item.coverImgUrl" />
        <div class="text-emerald-500 ml-2 truncate flex-1 w-1">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useSearchStore } from "../../store/search";
  import { useRouter } from "vue-router";
  const router = useRouter()
  //状态管理工具
  const searchStore = useSearchStore();
  const getTitle = (name: string) => {
    switch (name) {
      case "songs":
        return "单曲";
      case "albums":
        return "专辑";
      case "artists":
        return "歌手";
      case "playlists":
        return "歌单";
      default:
        return name;
    }
  };
  //跳转至搜索页
  const goSearch = (keywords: string) => {
    router.push("/searchDetail?keywords=" + keywords);
  };
</script>

<style scoped></style>
